<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>用户反馈信息展示</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
    <!--====== Magnific Popup CSS ======-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--====== Slick CSS ======-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--====== Line Icons CSS ======-->
    <link rel="stylesheet" href="assets/css/LineIcons.css">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--====== Default CSS ======-->
    <link rel="stylesheet" href="assets/css/default.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="assets/css/style.css">

</head>
<body>
<!-- 导入页眉 -->
<div class="header"></div>

<!--====== 自定义代码开始 ======-->
<section id="about" class="about-area" style="margin-top: 2.5rem">
    <div class="container" id="div_vue">


        <!--====== 从这里开始 ======-->
        <table class="table">
            <thead class="thead-dark">
            <tr>
                <th scope="col">用户名</th>
                <th scope="col">反馈意见</th>
                <th scope="col">是否满意</th>
                <th scope="col">用户手机号码</th>
                <th scope="col">最喜欢哪个博主</th>
                <th scope="col">反馈时间</th>
            </tr>
            </thead>
            <tbody>
            <tr id="tr" v-for="feedback in feedbackList">
                <td>{{feedback.userName}}</td>
                <td><p style="display:none;">{{feedback.feedback}}</p><button v-on:click="click" :feedback="feedback.feedback" type="button" class="btn btn-info">显示反馈信息</button></td>
                <td>{{feedback.fbSatisfaction}}</td>
                <td>{{feedback.fbPhoneNumber}}</td>
                <td>{{feedback.fbFavoriteBlogger}}</td>
                <td>{{feedback.standarTime}}</td>
            </tr>
            </tbody>
        </table>

        <!--====== 导入右边导航栏 ======-->
        <div class="admin-nav"></div>

        <!--====== 从这里结束 ======-->


    </div> <!-- container -->
</section>
<!--====== 自定义代码结束 ======-->


<!-- 导入页脚 -->
<div class="footer"></div>
<!--导入所有js文件-->
<!--====== Jquery js ======-->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--====== Slick js ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Magnific Popup js ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Ajax Contact js ======-->
<script src="assets/js/ajax-contact.js"></script>
<!--====== Isotope js ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Scrolling Nav js ======-->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/scrolling-nav.js"></script>
<!--====== Main js ======-->
<script src="assets/js/main.js"></script>
<script src="assets/js/util/HttpUtil.js"></script>
<!--====== VUE js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
        $('.admin-nav').load('admin-nav.html');
    });
    //在js中引入页眉页脚
    $(function () {

    });
    var vm = new Vue({
        el:'#div_vue',
        data:{
             feedbackList: []
                //  [{id: 2, password: "11111111111111111111111111rry1231", userName: "jerry1"},
                // {id: 3, password: "jerry1231", userName: "jerry2"}]
        },
        methods: {
            refreshFeedbackList: function () {
                let url = "feedbackSelect.do";
                let thisObject = this;
                doGet(url,function (data) {
                    console.log("回调函数执行日志");
                    console.log(data);
                    thisObject.feedbackList = data;
                })
            },
            click: function (e) {
                var that = e.target;
                console.log(that);
                console.log($(that).attr("feedback"))
                console.log("隐藏方法");
                alert($(that).attr("feedback"));
                //console.log(text);
            }
        },
        //页面加载之后完成，并且vue对象加载完成之后调用
        mounted:function () {
            this.refreshFeedbackList();
        },
        created: function () {
            console.log("created");
        }
    });


    //在js中引入页眉页脚
</script>